<template>
  <div>
    <el-row class="print-none">
      <el-col :span="22">
        <!--el-icon-printer-->
        <el-button type="primary" size="small" @click="printTest" icon="el-icon-printer" v-show="false">打印发运单</el-button>
        <el-button type="primary" size="small" v-show="false">已发运</el-button>
        <el-button type="primary" size="small" @click="transportBill" v-show="false" >编辑发运单</el-button>
        <span class="by-null">'</span>
      </el-col>
      <el-col :span="2" >
        <el-button type="primary" size="small" :loading="true">刷新</el-button>
      </el-col>
    </el-row>
    <hr style="border: .5px solid #e6e6e6">
    <el-row>
      <el-card class="by-print-page-test">
        <h1 style="text-align: center">发运单</h1>
        <hr style="border: .5px solid #e6e6e6">
        <bill_card :bill_info="print_bill_info" v-if="print_bill_info"></bill_card>
      </el-card>
    </el-row>
    <div class="print-none">
      <el-table
        id="by-loadCar-table"
        border
        resizable
        ref="loadCar"
        :data="transportBillInfo"
        tooltip-effect="dark"
        style="width: 100%;display: block"
        @row-click= 'rowClick'
        :highlight-current-row="true">
        <!-- @row-click= ''    @selection-change="" -->
        <el-table-column type="selection" @selectClick.stop="byNull" width="34"></el-table-column>
        <el-table-column prop="orderId" label="系统订单号"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名"></el-table-column>
        <el-table-column prop="customerPhone" label="客户电话"></el-table-column>
        <el-table-column prop="freight" label="货运部名称"></el-table-column>
        <el-table-column prop="freightPhone" label="货运部电话"></el-table-column>
        <el-table-column prop="freightAddress" label="货运部地址" width="300"></el-table-column>
        <el-table-column label="状态" width="300">
          <template slot-scope="scope">
            <el-tag type="success">
              {{scope.row.orderStatus | getOrderStatus}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
            <el-button
            size="mini"
            type="primary"
            @click="transportBill(scope.$index, scope.row)">已发运</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="printTest(scope.$index, scope.row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <hr class="print-none" style="border: .5px solid #e6e6e6">
    <el-row :gutter="10" class="print-none">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>餐椅</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
          </div>
          <div class="text item order-item" v-if="orderDetailInfo.chairInfo" v-for="(item,key) in orderDetailInfo.chairInfo" :key="'chair'+key">
            <div>{{key+1}}, {{item.chair.value}}({{item.chair.name}},{{item.color|a}},{{item.board|a}})------{{item.number}} {{item.unit|a }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>餐桌</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.tableInfo" v-for="(item,key) in orderDetailInfo.tableInfo" :key="'table'+key">
            <div>{{key+1}}, {{item.table.value}}({{item.table.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>茶几</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.teaTableInfo" v-for="(item, key) in orderDetailInfo.teaTableInfo" :key="'teaTable'+key">
            <div>{{key+1}}, {{item.teaTable.value}}({{item.teaTable.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}}, {{item.footerMaterial|a}}[脚]</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>电视柜</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.tvTableInfo" v-for="(item, key) in orderDetailInfo.tvTableInfo" :key="'tvTable'+key">
            <div>{{key+1}}, {{item.tvTable.value}}({{item.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}[脚]</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-show="false">
      <el-col>
        <!-- startPrint -->
        <div class="page by-print-page">
          这是测试打印界面
          <div class="subpage">Page 1/2</div>
        </div>
        <!-- endPrint -->
      </el-col>
    </el-row>
    <el-dialog title="发货确认" :visible.sync="editTransportBillFlag">
      <by_edit :data="confirmFreightData"></by_edit>
    </el-dialog>
    <!-- 用于打印的iFrame -->
    <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
  </div>
</template>

<script type="text/javascript">
  import by_edit from './layer/editTransportBill'
  import bill_card from './layer/billCard'
  import { getList } from '@/api/transport/transportBill'
  import { getGoodsInfo } from '@/api/order/index'
  export default{
    name: 'loadCar',
    components: {
      by_edit,
      bill_card
    },
    created() {
      const that = this
      // 获取主列表
      getList().then(function(res) {
        if (res.data.success) {
          that.transportBillInfo = res.data.data
          console.log(that.transportBillInfo)
        }
      })
    },
    data() {
      return {
        data: '',
        editTransportBillFlag: false,
        transportBillInfo: [],
        orderDetailInfo: [],
        print_bill_info: '',
        confirmFreightData: ''
      }
    },
    methods: {
      printBill: function() {
        // 设置打印开始区域、结束区域
        const printhtml = document.getElementsByClassName('by-print-page-test')[0].innerHTML
        // 生成并打印iframe
        const f = document.getElementById('printf')
        f.contentDocument.write(printhtml)
        f.contentDocument.close()
        f.contentWindow.print()
      },
      transportBill: function(i, row) {
        // 在这里确认已发运
        // 主要用于 核对货物是否发运完整， 和是否发往客户指定的货运部，以及货运电话地址是否准确，或者是否需要更新
        this.confirmFreightData = row
        this.editTransportBillFlag = true
      },
      printTest: function(i, row) {
        this.print_bill_info = this.transportBillInfo[i]
        window.print()
      },
      rowClick(row, event, column) {
        // row.forEach(row => {
        // this.$refs.multipleTable.toggleRowSelection(row)
        // })
        const temp = ['INPUT', 'SPAN', 'BUTTON']
        if (temp.indexOf(event.srcElement.nodeName) === -1 || !event.srcElement.className) {
          this.$refs.loadCar.clearSelection()
          this.$refs.loadCar.toggleRowSelection(row)
        } else {
          event.stopPropagation()
        }
        const that = this
        this.currentRowClickInfo = row
        this.currentOrderId = row.orderId
        // 获取订单详情
        getGoodsInfo({ orderId: row.orderId }).then((res) => {
          if (res.data.success) {
            that.orderDetailInfo = res.data.data
            that.orderDetailInfoClone = res.data.data
            console.log(res.data)
          }
        })
        console.log('srcElement', event.srcElement.nodeName)
        console.log('rowClick-row', row)
        console.log('rowClick-event', event)
        console.log('rowClick-column', column)
      },
      handleEite: function() {
        return 0
      },
      handlePrint: function() {
        return 0
      }
    }
  }
</script>

<style type="text/scss" scoped>
  .page {
    width:21cm;
    min-height:29.7cm;
    padding:2cm;
    margin:1cm auto;
    border:1px #D3D3D3 solid;
    border-radius:5px;
    background:white;
    box-shadow:0 0 5px rgba(0，0，0，0.1);
  }
  .subpage {
    padding:1cm;
    border:5px red solid;
    height:256mm;
    outline:2cm #FFEAEA solid;
  }
</style>
